<template>
  <!-- 登录面板 -->
  <!-- 粒子动态背景html部分 -->
  <vue-particles id="tsparticles" :options="Particlesoptions" />
  <!-- <a-button>aaa</a-button> -->
  <!-- 表单部分 -->
  <div class="loginModel">
    <div class="logo">
      <img src="../../assets/logo.png" alt="" />
    </div>
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[
          { required: true, message: '账号不能为空!' },
          { min: 3, max: 15, message: '账号应该在3-15位', trigger: 'blur' },
        ]"
      >
        <a-input
          size="large"
          placeholder="请输入您的账号"
          ref="account"
          v-model:value="formState.username"
        >
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: '密码不能为空!' }]"
      >
        <a-input-password
          size="large"
          placeholder="请输入您的密码"
          v-model:value="formState.password"
        >
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item name="remember">
        <a-checkbox
          v-model:checked="formState.remember"
          class="rememberCheckbox"
          >记住密码</a-checkbox
        >
      </a-form-item>

      <a-form-item>
        <a-button
          :loading="isLoading"
          type="primary"
          html-type="submit"
          block
          size="large"
          >登录</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
// 引入
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { reactive } from "vue";
import Particlesoptions from "../../config/particles"; //粒子背景的配置
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue"; // 引入 图标组件
import { message } from "ant-design-vue";
import {
  setStorage,
  getStorage,
  removeStorage,
} from "../../utils/localStorage"; // 导入工具函数
// import { loginApi } from "../../api/user"; //api
import useUserStore from "../../store/user";

import particles from "../../config/particles";
const userStore = useUserStore();
const router = useRouter();
// 发送请求loading
const isLoading = ref(false);
// 获取账号密码【记住密码】
const info = getStorage("userInfo");
const initInfo = {
  username: "",
  password: "",
  remember: true,
};
// 双向数据绑定表单
const formState = reactive(info ? info : initInfo);
// 自动获得焦点
const account = ref(null);
onMounted(() => {
  account.value.focus();
});
// 验证成功后登录
const onFinish = async (values) => {
  // 记住密码功能
  const { username, password, remember } = values;
  remember ? setStorage("userInfo", values) : removeStorage("userInfo");
  // if (remember) {
  //   //保存密码-本地存储
  //   setStorage("userInfo", values);
  // } else {
  //   removeStorage("userInfo");
  // }
  console.log("Success:", values);
  isLoading.value = true;

  userStore
    .getUserToken({ username, password })
    .then((res) => {
      console.log(res);
      message.success("恭喜你登录成功");
      isLoading.value = false;
      router.push({ name: "dashboard" });
    })
    .catch((e) => {
      console.log(e);
      isLoading.value = false;
    });

  // try {
  //   const res = await loginApi({ username, password });
  //   console.log(res);
  //   router.push({ name: "home" });
  // } catch (error) {
  //   console.log(error);
  // }

  // isLoading.value = false;

  // 3s后成功->跳转
  //   setTimeout(() => {
  //     success: router.push("/home");
  //     fail: isLoading.value = false;
  //     message.warn("账号或密码有误！");
  //     account.value.focus();
  //   }, 3000);
};
// 验证失败
const onFinishFailed = () => {
  message.error("验证错误，请处理");
};
</script>
<style lang="less">
/* less css预处理器 */
// 表单的css
.rememberCheckbox {
  color: #fff;
}
.loginModel {
  width: 500px;
  background-color: rgba(215, 217, 224, 0.35);
  position: fixed;
  left: 50%;
  top: 50%;
  padding: 20px 40px;
  transform: translate(-50%, -50%);
  z-index: 5000;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: -1px 0px 17px 4px rgb(0, 0, 0, 0.55);
  .logo {
    display: flex;
    justify-content: center;
    img {
      width: 120px;
      margin-bottom: 20px;
    }
  }
}
</style>
